<template>
    <div class="main">
        <!-- 歌单分类标签 -->
        <div class="category-tags">
            <span 
                v-for="tag in tags" 
                :key="tag.name"
                class="tag" 
                :class="{ active: currentTag === tag.name }"
                @click="handleTagClick(tag.name)"
            >
                {{ tag.name }}
            </span>
        </div>
        <!-- 歌单网格 -->
        <div class="song-list-grid">
            <template v-if="singerStore.singerList && singerStore.singerList.length > 0">
                <div class="song-card" v-for="playlist in singerStore.singerList" :key="playlist.id">
                    <div class="card-cover">
                        <img @click="handleCardClick(playlist.id)" :src="`${config.downloadUrl}?name=${playlist.pic}`" alt="封面">
                    </div>
                    <div class="card-title">{{ playlist.name }}</div>
                </div>
            </template>
            <div v-else class="empty-state">
                空空如也
            </div>
        </div>
    </div>
</template>

<script setup name="SongList">
import { ref, onMounted } from 'vue'
import { usePlayListDetails } from '@/store/playListDetails'
import config from '../../../public/config'
import { useAudioStore } from '@/store/audio';
import { getSingerAllNoPage,getSingerOnSex} from '@/api/singer'
import { useSingerStore } from '@/store/singer'


const playListDetailsStore = usePlayListDetails()
const audioStore = useAudioStore()
const singerStore = useSingerStore()

// 标签数据0女1男2组合
const tags = [
    {name:'全部'},
    {id:1,name:'男'},
    {id:0,name:'女'},
    {id:2,name:'组合'}
]

const currentTag = ref('全部')
const loading = ref(false)

// 处理标签点击
const handleTagClick = async (tagName) => {
    currentTag.value = tagName
    if(tagName === '全部'){
        getSingerAll()
    }else{
        getSingerOnSex1(tags.find(tag => tag.name === tagName).id)
    }
}

function handleCardClick(id){
    singerStore.singerId = id
    singerStore.isSingerOpen = true
}

onMounted(() => {
    getSingerAll()
})

function getSingerAll(){
    getSingerAllNoPage().then(res=>{
        singerStore.singerList = res
    })
}

function getSingerOnSex1(id){
    let params = new URLSearchParams()
    params.append('sex',id)
    getSingerOnSex(params).then(res=>{
        singerStore.singerList = res
    })
}
</script>

<style scoped>
.main {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

::-webkit-scrollbar {
    width: 10px;
    /* 滚动条宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: #e1e5ec;
    /* 轨道颜色 */
    border-radius: 10px;
    /* 圆角 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #4b79a1, #283e51);
    /* 渐变颜色 */
    border-radius: 10px;
    /* 圆角 */
}

/* 滑块在悬停时的效果 */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #3b607e, #1b2e38);
    /* 更深的渐变颜色 */
}

.category-tags {
    padding: 20px;
    display: flex;
    gap: 15px;
}

.tag {
    padding: 5px 15px;
    border-radius: 15px;
    background: #f5f5f5;
    cursor: pointer;
    transition: all 0.3s;
}

.tag.active {
    background: #ff3a3a;
    color: white;
}

.song-list-grid {
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.song-card {
    cursor: pointer;
}

.card-cover {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.card-cover img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.3s;
}
.card-cover:hover .play-button {
    opacity: 1;
}
.song-card:hover .card-cover img {
    transform: scale(1.05);
}

.play-count {
    position: absolute;
    top: 5px;
    right: 5px;
    color: white;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 8px;
    border-radius: 10px;
}

.card-title {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.empty-state {
    text-align: center;
    padding: 40px 0;
    color: #999;
    font-size: 16px;
    grid-column: 1 / -1;
}
</style>
